<template>
	<view class="customer">
		<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex detailsPaid_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between detailsPaid_fd0_0'>
				<view class='flex flex-wrap align-center detailsPaid_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  detailsPaid_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-center'>
					<text class='detailsPaid_fd0_0_c1_c0'>售后</text>
				</view>
				<view class='flex align-center justify-end detailsPaid_fd0_0_c2'>
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="!isShow">
			<u-loading size="36" color="#4177DD"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<template v-else>
			<view class="list">
				<view class="details">
					<view class="img">
						<image :src="goods_info.goods_thumb" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="name">{{goods_info.goods_name}}</view>
						<view class="sku_name">
							<text v-if="goods_info.sku_name">规格：</text>
							<text>{{goods_info.sku_name}}</text>
						</view>
						<view class="price">
							<view class="price_left">
								<text>￥</text>
								<text>{{goods_info.shop_price}}</text>
							</view>
							<view class="price_right">x{{goods_info.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="refund">
				<view class="refund_reason" @tap="refundReason">
					<view class="refund_reason_left">退货/退款原因</view>
					<view class="refund_reason_right">
						<text>{{content}}</text>
						<u-icon name="arrow-right" color="#BFBFBF" size="28"></u-icon>
					</view>
			
				</view>
				<view class="refund_money">
					<text>退款金额：</text>
					<text>￥</text>
					<text>{{goods_info.goods_money}}</text>
					<text>不可修改</text>
				</view>
			</view>
			<view class="textarea">
				<view class="textarea_name">退款说明</view>
				<textarea v-model="textValue" name="" id="" cols="30" rows="10" placeholder="申请退款，请确认已经和商家联系。请在此描述申请售后服务的原因"></textarea>
			</view>
			<!-- <view class="updateImg">
				<view v-for="(v, k) in imageData" :key="k">
					<image :src="v.thumb" mode="aspectFill"></image>
					<image class="close" @tap="deleteImg(v.id)" src="/static/201.png"></image>
				</view>
				<view @tap="uploadIMG" v-if="imageData.length < 3">
					<image src="/static/images/60.jpg"></image>
			
				</view>
			</view> -->
			<view class='flex flex-direction flex-wrap align-stretch'>
				<benben-images-upload ref="benbenImagesUploadfd1_3_c1_c0" :img-list.sync="imgs" :img-ids.sync="thumb"
					:is-show-tips='true' :maxlength="3">
					<template #content="{ num, maxlength, isShow, imgList }">
						<view class="flex flex-wrap align-start flex feedBack1666772448_fd1_3_c1_c0">
			
							<view v-for="(image, index) in imgList" :key="index"
								class='flex position-relative feedBack1666772448_fd1_3_c1_c00'>
								<text class='fu-iconfont2 position-absolute feedBack1666772448_fd1_3_c1_c000'
									@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.delImage(index)">&#xE8E7;</text>
								<image class='feedBack1666772448_fd1_3_c1_c001'
									@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.previewImage(index)" mode="aspectFill"
									:src='image'></image>
							</view>
			
							<image class='feedBack1666772448_fd1_3_c1_c01'
								@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.manyChooseImage()" v-if="isShow"
								mode="aspectFill" :src='STATIC_URL+"60.jpg"'></image>
							<text class='image_upload_tips feedBack1666772448_fd1_3_c1_c02'>请上传截图，最多上传3张</text>
						</view>
					</template>
				</benben-images-upload>
			</view>
			<view class="submit">
				<button hover-class='none' @click="getCustomer">提交</button>
			</view>
		</template>
		


		<!-- 退款原因选项 -->
		<benben-popup v-model="show" mode="bottom" height="51%" border-radius="24">
			<view class="close_order">
				<view class="close_title">退款</view>
				<view class="close_reason">请选择退款原因</view>
				<view class="option">
					<view class="option_select" v-for="(v, k) in cancelList" :key="k" @tap="changeCancel(k)">
						<text>{{v.title}}</text>
						<image src="/static/images/115.png" v-if="v.isChange"></image>
						<image src="/static/images/57.png" v-else></image>
					</view>
				</view>
				<view class="btn">
					<view class="btn_close" @tap="cancelOrder">取消</view>
					<view class="btn_query" @tap="queryCancel">确认</view>
				</view>
			</view>
		</benben-popup>
	</view>
</template>

<script>
	import {
		emit
	} from 'process';
	export default {
		data() {
			return {
				isShow: false,
				show: false,
				order_sn: '', // 订单号
				goods_id: '', // 商品id
				image: '', // 商品图片
				name: '', // 商品名称
				money: '', // 商品金额
				real_money: '', // 实际金额
				content: '请选择退款原因', //
				cancelType: 2, //1取消订单原因 2 退款原因
				cancelList: [],
				cancelIndex: '', // 退款id
				imageData: [],
				images: '',
				imgNum: 3,
				textValue: '', // 退款说明
				is_submit: false,
				goods_info: {}, // 商品信息
				"thumb": "",
				"imgs": [],
			}
		},
		onLoad(option) {
			this.order_sn = option.order_sn;
			this.goods_id = option.goods_id;
			// this.image = option.image;
			// this.name = option.name;
			// this.money = option.money;
			// this.real_money = option.real_money;
			this.getCancelOrder();
			this.getRefundGoods();
		},
		methods: {
			// 退款原因
			refundReason() {
				this.show = true
			},

			// 获取退款商品信息  post64a775317d3bb
			getRefundGoods() {
				this.$api.post(global.apiUrls.post64a775317d3bb, {
					order_sn: this.order_sn,
					goods_id: this.goods_id
				}).then(res => {
					// console.log(res);
					this.isShow = true;
					if (res.data.code == 1) {
						this.goods_info = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 获取申请售后/取消订单原因
			getCancelOrder() {
				this.$api.post(global.apiUrls.post643d70d7d49d4, {
					type: 1
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						let cancelList = res.data.data;
						if (cancelList.length > 0) {
							cancelList.forEach((v, k) => {
								isChange: false
							})
						}
						this.cancelList = cancelList;
						// this.cancelIndex = this.cancelList[0].aid;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			cancelOrder() {
				this.show = false;
				// this.content = '请选择退款原因';
				// this.cancelIndex = '';
			},
			// 确认取消订单
			queryCancel() {

				if (this.content == '请选择退款原因') {
					this.$message.info('请选择退款原因');
					return false;
				} else {
					this.show = false;
				}

				// this.$api.post(global.apiUrls.postCancelOrder, {
				// 	order_sn: this.detailsInfo.order_sn,
				// 	cancel_id: this.cancelIndex
				// }).then(res => {
				// 	this.$message.info(res.data.msg);
				// 	if (res.data.code == 1) {
				// 		setTimeout(() => {
				// 			uni.navigateBack({
				// 				delta: 1
				// 			})
				// 		}, 500)
				// 	}
				// })
			},
			// 选择取消订单原因
			changeCancel(k) {
				this.cancelList.forEach((v, k) => {
					v.isChange = false
				})
				this.cancelList[k].isChange = true;
				// this.cancelIndex = this.cancelList[k].aid;
				this.content = this.cancelList[k].title;
				this.$forceUpdate();
			},
			// 提交售后
			getCustomer() {
				if (this.is_submit) return;
				if (this.content == '请选择退款原因') {
					this.$message.info('请选择退款原因');
					return false;
				}
				// if (this.textValue == '') {
				// 	this.$message.info('请输入退款说明')
				// 	return false
				// }

				// if (this.imageData.length == 0) {
				// 	this.$message.info('请上传商品图片');
				// 	return false;
				// }
				this.is_submit = true;
				this.$api.post(global.apiUrls.post64a7756235d36, {
					order_sn: this.order_sn,
					goods_id: this.goods_id,
					apply_reason: this.content,
					refund_reason: this.textValue,
					images: this.imgs.length > 0 ? this.imgs.join(',') : ''
				}).then(res => {
					this.$message.info(res.data.msg)
					this.$emit('updataOrderInfo');
					if (res.data.code == 1) {
						global.order_msg_type = 4;
						getApp().orderChat();
						setTimeout(() => {
							this.is_submit = false;
							uni.navigateBack({
								delta: 2
							})
						}, 800);
					} else {
						this.is_submit = false;
					}
				}).catch(err => {
					this.is_submit = false;
				})
			},
			// 上传图片
			uploadIMG(e) {
				// 	let self = this
				// 	// 从相册中选择图片
				// 	uni.chooseImage({
				// 		count: self.imgNum, //默认6
				// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 		sourceType: ['camera', 'album'], //从相册选择

				// 		success: function(res) {
				// 			const tempFilePaths = res.tempFilePaths;
				// 			console.log(tempFilePaths)
				// 			for (let i = 0; i < tempFilePaths.length; i++) {
				// 				uni.uploadFile({
				// 					url: global.IMG_BASE_URL + global.apiUrls.UPLOAD_IMAGE_URL, //仅为示例，非真实的接口地址
				// 					filePath: tempFilePaths[i],
				// 					name: 'file',
				// 					success: (uploadFileRes) => {
				// 						console.log(uploadFileRes)
				// 						self.imageData.push(JSON.parse(uploadFileRes.data).data[0])
				// 						self.imgNum = 3 - self.imageData.length
				// 					},
				// 					fail: function(err) {
				// 						console.log(err)
				// 					}
				// 				});
				// 			}

				// 		}
				// 	});
			},

			// 删除图片
			deleteImg(id) {
				let index = 0
				this.imageData.forEach((v, k) => {
					if (id == v.id) {
						index = k
					}
				})
				this.imageData.splice(index, 1)
				this.$message.info('删除成功')
				this.imgNum = 3 - this.imageData.length
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		// background: url(~@/static/images/36.png) no-repeat, #F8F8F8;
		background-size: 100% auto !important;
		background: #FFFFFF;
	}
	
	.detailsPaid_flex_0 {
		// background: url(~@/static/images/36.png) no-repeat, transparent;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
		background: #ffffff;
	}
	
	.detailsPaid_fd0_0_c2 {
		padding: 0rpx 0rpx 0rpx 0rpx;
		width: 200rpx;
	}
	
	.detailsPaid_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}
	
	.detailsPaid_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}
	
	.detailsPaid_fd0_0_c0 {
		width: 200rpx;
	}
	
	.detailsPaid_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.feedBack1666772448_fd1_3_c1_c02 {
		font-size: 24rpx;
		color: rgba(191, 191, 191, 1);
		font-weight: 400;
		width: 100%;
	}

	.feedBack1666772448_fd1_3_c1_c01 {
		width: 160rpx;
		height: 160rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.feedBack1666772448_fd1_3_c1_c001 {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.feedBack1666772448_fd1_3_c1_c000 {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}

	.feedBack1666772448_fd1_3_c1_c00 {
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.feedBack1666772448_fd1_3_c1_c0 {
		padding: 24rpx 0rpx 0rpx 24rpx;
	}

	.customer {

		// padding: 0 32rpx;
		.list {
			padding: 32rpx;
			background: #FFFFFF;

			// border-bottom: 1rpx solid #EEEEEE;
			.order-number {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				margin-bottom: 32rpx;

				view:nth-child(1) {
					color: #666666;
				}

				view:nth-child(2) {
					color: #47D1D1;
				}
			}

			.shop_name {
				margin-bottom: 16rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 10rpx;
					vertical-align: middle;
					margin-right: 16rpx;
				}

				text {
					font-size: 28rpx;
					color: #666666;
				}
			}

			.details {
				display: flex;
				// margin-bottom: 32rpx;

				.img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}

				.content {
					width: calc(100% - 200rpx);
					padding-left: 24rpx;

					.name {
						font-size: 28rpx;
						height: 76rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2; /* 这里是超出几行省略 */
					}

					.explain {
						font-size: 24rpx;
						color: #999999;
						margin: 8rpx 0 34rpx 0;
					}

					.sku_name {
						font-size: 24rpx;
						color: #999999;
						margin-top: 16rpx;
						height: 30rpx;
					}

					.price {
						margin-top: 34rpx;
						display: flex;
						justify-content: space-between;

						.price_left {
							color: #FA2033;
							font-weight: 500;
							font-size: 32rpx;

							text:nth-child(1) {
								font-size: 20rpx;
							}
						}

						.price_right {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
		}

		.refund {
			padding: 32rpx;

			.refund_reason {
				display: flex;
				justify-content: space-between;
				margin-bottom: 32rpx;

				.refund_reason_left {
					font-weight: 400;
				}

				.refund_reason_right {
					color: #BFBFBF;
				}
			}

			.refund_money {
				text:nth-child(1) {
					font-weight: 400;
				}

				text:nth-child(2) {
					color: #FA2033;
					font-size: 20rpx;
				}

				text:nth-child(3) {
					color: #FA2033;
					margin-right: 16rpx;
				}

				text:nth-child(4) {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.textarea {
			font-size: 28rpx;
			width: 100%;
			// height: 150rpx;
			padding: 32rpx;

			.textarea_name {
				margin-bottom: 32rpx;
				font-size: 32rpx;
			}

			textarea {
				width: 100%;
				height: 180rpx;
				font-size: 28rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				padding: 16rpx;
			}
		}

		.updateImg {
			padding: 32rpx;
			overflow: hidden;

			view {
				// width: 30%;
				float: left;
				margin-right: 36upx;
				margin-bottom: 32upx;
				width: 180upx;
				height: 180upx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.close {
					width: 32upx;
					height: 32upx;
					position: absolute;
					top: -12upx;
					right: -12upx;
				}
			}

			view:nth-child(3n+3) {
				margin-right: 0;
			}
		}

		.maxImg {
			color: #BFBFBF;
			font-size: 24rpx;
		}

		.submit {
			width: 100%;
			opacity: 1;
			font-size: 32upx;
			// background: #f6f6f6;
			text-align: center;
			position: fixed;
			bottom: 0;
			padding-bottom: 48upx;
			z-index: 1;

			button {
				line-height: 88upx;
				margin-left: 32upx;
				width: 686upx;
				height: 88upx;
				color: #FFFFFF;
				background-color: rgba(48, 131, 255, 1);
				opacity: 1;
				border-radius: 50px;
				outline: none;
				// border: 1px solid transparent;
			}
		}

		.close_order {
			position: relative;
			height: 100%;
			padding-bottom: 125rpx;
			background: #FFFFFF;

			.close_title {
				padding: 32rpx 0;
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
			}

			.close_reason {
				font-size: 28rpx;
				color: #666666;
				padding: 25rpx;
				background: #F8F8F8;
			}

			.option {
				// padding: 40rpx 0;
				padding-top: 40rpx;

				.option_select {
					display: flex;
					padding: 0 24rpx;
					margin-bottom: 40rpx;
					justify-content: space-between;

					image {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
						transform: translateY(5rpx);
					}
				}
			}

			.btn {
				position: absolute;
				bottom: 20rpx;
				display: flex;
				padding: 15rpx 24rpx;
				justify-content: space-between;
				width: 100%;

				.btn_close {
					width: 328rpx;
					height: 80rpx;
					background: #F6F6F6;
					opacity: 1;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
				}

				.btn_query {
					width: 328rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: rgba(48, 131, 255, 1);
					opacity: 1;
					border-radius: 50rpx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}

		.line {
			width: 100%;
			height: 20rpx;
			background: #F8F8F8;
		}
	}
</style>